<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.10/index.global.min.js'></script>
    <link href='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.10/main.css' rel='stylesheet' />
    <style>
        body {
          margin: 0;
          padding: 10px;
        }
    </style>
</head>
<body>
<div id='calendar'></div>
<script>
    document.addEventListener('DOMContentLoaded', function() {
      var calendarEl = document.getElementById('calendar');
      var calendar = new FullCalendar.Calendar(calendarEl, {
        initialView: 'dayGridMonth',
        locale: 'zh-cn',
        headerToolbar: {
          left: 'prev,next today',
          center: 'title',
          right: 'dayGridMonth,timeGridWeek,timeGridDay'
        },
        events: function(info, successCallback, failureCallback) {
          // 调用节假日API获取数据
          fetch('https://api.apihubs.cn/holiday/get')
            .then(response => response.json())
            .then(data => {
              // 转换API数据为FullCalendar事件格式
              const events = data.data.list.map(holiday => ({
                title: holiday.holiday_name,
                start: holiday.holiday_date,
                color: holiday.holiday_type === 1 ? '#e74c3c' : '#3498db'
              }));
              successCallback(events);
            })
            .catch(error => {
              console.error('获取节假日数据失败:', error);
              failureCallback(error);
            });
        }
      });
      calendar.render();
    });
</script>
</body>
</html>